<template>
  <div class="user-container">
    <!-- 头部信息 -->
    <div class="user-header" @click="goTo('user-detail')">
      <div class="info">
        <!-- loading动画 -->
        <transition name="fade">
          <van-loading class="load" v-if="loading" color="#1989fa" />
        </transition>
        <transition name="fade">
          <div class="info-container" v-if="!loading">
            <img :src="user.avatar" />
            <div class="user-desc">
              <span>用户名：{{ user.username }}</span>
              <span v-if="!isVisitor || user.username !== '游客'"
                >创建日期：{{ user.createdAt }}</span
              >
            </div>
            <div class="detail">详情<van-icon name="arrow" /></div>
          </div>
        </transition>
      </div>
    </div>
    <!-- 更多功能 -->
    <div class="user-fun">
      <span>更多功能</span>
      <van-grid square :border="false">
        <van-grid-item icon="search" text="发现" @click="goToMyFindList" />
        <van-grid-item icon="records" text="帖子" @click="goToMyBBSList" />
        <van-grid-item icon="chat-o" text="bug反馈" @click="goToFeedback" />
      </van-grid>
    </div>
  </div>
</template>
<script>
import { getOneUser } from '@/api/user.js'
import { Icon, Grid, GridItem, Loading } from 'vant'
import { reactive, toRefs, onMounted} from 'vue';
import { useRouter,onBeforeRouteLeave} from 'vue-router'
import { showStatusTip, checkStatus } from '@/utils/loginStatus'
export default {
  name: 'user',
  components: {
    [Icon.name]: Icon,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Loading.name]: Loading,
  },
  setup() {
    const router = useRouter()
    const state = reactive({
      // 用户信息
      user: {
        username: '游客',
        createdAt: '',
        avatar: 'https://qcljo8.file.qingfuwucdn.com/file/8b0dad3da373e7c0_1646331209163.png'
      },
      // 加载状态
      loading: true,
      // 是否为游客
      isVisitor: true,
    })
    onMounted(async () => {
      state.isVisitor = sessionStorage.getItem('visitor') === 'true';
      state.user.username = sessionStorage.getItem('username') || '游客'
      // 为正常用户
      if (!state.isVisitor || state.user.username !== '游客') {
        const res = await getOneUser(state.user.username)
        const createdAt = new Date(res.createdAt).toLocaleDateString()
        state.user.createdAt = createdAt
        state.user.avatar = res.avatar
      }
      state.loading = false;
    })
    // 个人详情页跳转
    const goTo = (r) => {
      // 非正常用户不跳转
      if (state.isVisitor && state.user.username === '游客') {
        showStatusTip(() => { }, '，无法查看哦！')
        return
      }
      router.push({ name: r })
    }
    // 跳转我的帖子列表
    const goToMyBBSList = () => {
      // 非正常用户不跳转
      if (state.isVisitor) {
        showStatusTip(() => { }, '，无法查看哦！')
        return
      }
      const params = { ...state.user }
      router.push({
        name: "MyBBSList",
        params
      })
    }
    // 跳转我的发现列表
    const goToMyFindList = () => {
      // 非正常用户不跳转
      if (state.isVisitor) {
        showStatusTip(() => { }, '，无法查看哦！')
        return
      }
      router.push('/my-find-list')
    }
    //跳转到bug反馈页面
    const goToFeedback = () => {
      // 非正常用户不跳转
      if (state.isVisitor) {
        showStatusTip(() => { }, '，无法查看哦！')
        return
      }
      router.push('/feedback')
    }
    return {
      ...toRefs(state),
      goTo,
      goToMyBBSList,
      goToMyFindList,
      goToFeedback
    };
  }
}
</script>

<style lang="less" scoped >
// grid组件样式
:deep(.van-grid-item__content) {
  background-color: inherit;
}
// 外部容器
.user-container {
  padding-top: 10px;
  min-height: 98vh;
  background: url(../../assets/user_background.png) no-repeat;
  background-size: contain;
  background-position: bottom 0 right 0;
  // 头部信息
  .user-header {
    width: 94%;
    margin: 10px;
    height: 150px;
    background: linear-gradient(90deg, #1677d1, #4e9abd7c);
    // box-shadow: 0 2px 5px #0f6868;
    box-shadow: 0 2px 5px #858585;
    border-radius: 6px;
    .info {
      width: 100%;
      height: 100%;
      position: relative;
      .load {
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        line-height: 150px;
      }
      .info-container {
        width: 100%;
        height: 100%;
        display: flex;
        padding: 25px 20px;
        box-sizing: border-box;
        justify-content: space-between;
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          margin-top: 4px;
          align-self: center;
        }
        .user-desc {
          display: flex;
          flex-direction: column;
          margin-left: 10px;
          font-size: 14px;
          color: #000;
          justify-content: space-around;
          span {
            font-size: 14px;
            padding: 2px 0;
            text-align: left;
            letter-spacing: 2px;
          }
        }
        .detail {
          color: #5c5c5c;
          font-size: 12px;
          margin-left: 5px;
          letter-spacing: 2px;
        }
      }
    }
  }
  // 更多功能
  .user-fun {
    width: 94%;
    margin: 20px 10px;
    box-shadow: 0 2px 5px #858585;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 6px;
    span {
      font-size: 14px;
      font-weight: bold;
      padding: 10px;
    }
  }
}
// loading过度动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>